<template>
	<view class="flex flex-column background">
		<!-- 搜索框导航栏 -->

		<!-- 轮播图 -->
		<!-- <u-swiper :autoplay="true" :interval="3000" :duration="500" :list="list2" keyName="image" height="200px"
			showTitle circular></u-swiper> -->
		<u-swiper :list="list2" previousMargin="30" nextMargin="30" circular :autoplay="false" radius="15" height="160px"
			bgColor="#ffffff"></u-swiper>
		<!-- 功能栏 -->
		<view class="flex">
			<u-grid col="3" :border="false" @click="click">
				<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="22"></u-icon>
					<text class="grid-text">{{baseListItem.title}}</text>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>

		<!-- <view class="flex flex-column flex-center z-index">
			<u-search class=" border-radius background box-shadow" style="width: 90%;margin-top: -15px;" shape="round"
				placeholder="请输入关键词" @confirm="onSearch"></u-search>
		</view> -->

		<view class="flex flex-row flex-wrap">
			<view class="flex-item text-hw border-radius" v-for="(item, index) in activityInfo" :key="index">
				<u-image :showLoading="true" :src="item.activityImage" class="image-fill" height="100px" width="100%"
					@click="goToNav(item.id)"></u-image>
				<u--text color="#000000" size="16" :text="item.activityName"></u--text>
				<u--text mode="price" color="red" :text="item.activityPrice"></u--text>
			</view>
		</view>

		<!-- 徒步推荐 -->
		<!-- <view class="flex flex-column background flex-center padding-bottom">
			<view class="padding">
				<u-row gutter="20" class="flex-wrap ">
					<u-col span="6" v-for="(item, index) in activityInfo" :key="index">
						<view class=" box-shadow image-overflow margin-bottom margin-top border-radius" @click="goToNav(item.id)">
							<u--image :showLoading="true" :src="item.activityImage"  width="100%" height="100px"
							></u--image>
								<u--text color="#000000" size="16" :text="item.activityName"></u--text>
							<u--text mode="price" color="red" :text="item.activityPrice"></u--text>
						</view>
					</u-col>	
				</u-row>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "人气精选 | 心之所往",
				keyword: '',
				src: "/static/images/index/slider5.jpg",
				list2: [
					"/static/images/index/slider5.jpg",
					"/static/images/index/slider6.jpg",
					"/static/images/index/slider3.jpg",
					"/static/images/index/slider4.jpg"
				],
				baseList: [{
						name: 'photo',
						title: '两日游'
					},
					{
						name: 'lock',
						title: '工作日活动'
					},
					{
						name: 'star',
						title: '川西游'
					}, {
						name: 'photo',
						title: '东北'
					},
					{
						name: 'lock',
						title: '锁头'
					},
					{
						name: 'star',
						title: '星星'
					},
				],

				activityInfo: []
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			click(name) {
				this.$refs.uToast.success(`点击了第${name}个`)
			},
			onSearch(value) {
				console.log('搜索:', value);
				// 处理搜索逻辑
			},
			goToNav(id) {
				// console.log(id)
				uni.navigateTo({
					url: '/pages/index/activityInfo/activityInfo?id=' + id
				})
			},
			//挂载数据
			getData() {

				uni.request({
					url: "http://localhost:8083/activityInfo",
					success: (res) => {
						if (res.data.code === 200) {
							// console.log(res.data.data)
							this.activityInfo = res.data.data
						}
					},
					fail: (err) => {
						console.log(err)
					}

				})

			},




		}
	}
</script>
<style lang="scss">
	.u-grid {
		margin-top: 10px;
		height: 135px;
	}
</style>